<script lang="tsx" setup>
/**
 * 侧边栏
 */
import {ref} from "vue";
import {dateTree, definePageTree, PageTree, processRequest} from "@/framework";
import APIS from "@/apis";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 组件
 */
import DepartmentForm from "./components/department-form/index.vue"

/**
 * 新增实例
 */
const departmentFormRef = ref()

/**
 * 定义emit
 */
const emit = defineEmits<{
  (e: "change", node: Node): void
}>()

/**
 * 组件实例
 */
const treeRef = ref<any>()
const config = definePageTree<any>({
  url: APIS.DEPARTMENT_RULE_ASIDE,
  getDataCallBack(data: any) {
    return dateTree(data)
  },
  searchForm: {
    els: [
      {
        label: "部门编码/名称",
        eType: "el-input",
        prop: "department",
        props: {
          placeholder: "部门编码/名称",
          clearable: true
        }
      }
    ]
  },
  tree: {
    props: {
      defaultExpand: true
    },
    event: {
      nodeClick(node: Node) {
        emit("change", node)
      },
    },
    prop: {
      children: "items",
      label: "name"
    },
    renderFn(data: any) {
      return <div class="item">
        <div class="item-name">
          {`${data.name}(${data.code})`}
        </div>
      </div>
    },
  },
  bottom: {
    show: true,
    renderFn() {
      /**
       * 新增
       */
      const handleAdd = () => {
        const data = treeRef.value.getCurrentNode()
        if (data) {
          departmentFormRef.value.show({
            isEdit: false,
            superiorId: data.id,
            superiorName: data.name
          })
        } else {
          departmentFormRef.value.show({
            isEdit: false
          })
        }
      }

      /**
       * 编辑
       */
      const handleEdit = () => {
        const data = treeRef.value.getCurrentNode()
        departmentFormRef.value.show({
          isEdit: true,
          data: data
        })
      }

      /**
       * 删除
       */
      const handleDelete = async () => {
        const data = treeRef.value.getCurrentNode()
        if (!data) {
          ElMessage.warning("请先选择一条数据")
          return
        }
        await ElMessageBox.confirm("是否确认删除该部门", "删除", {
          type: "warning"
        })
        await processRequest.delete("/api/Department", {
          id: data.id
        }, {
          isLoading: true
        })
        ElMessage.success("删除成功")
        refreshTreeData()
      }

      return <div class="item-button">
        <el-button type="primary" onClick={handleAdd}>新增</el-button>
        <el-button type="warning" onClick={handleEdit}>编辑</el-button>
        <el-button type="danger" onClick={handleDelete}>删除</el-button>
      </div>
    }
  },
})


/**
 * 刷新
 */
const refreshTreeData = () => {
  treeRef.value.refreshTreeData()
}
</script>

<template>
  <div class="department-staff-aside">
    <PageTree ref="treeRef" :config="config"/>

    <!-- 新增/编辑菜单 -->
    <DepartmentForm ref="departmentFormRef" @confirm="refreshTreeData"/>
  </div>
</template>

<style lang="scss" scoped>
.department-staff-aside {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.el-tree-node__content) {
  padding: 5px 0;

  .item {
    display: flex;
    white-space: nowrap;

    .item-name {
      font-size: 16px;
      flex: 0;

    }
  }
}
</style>